<template>
    <input type="text" v-model="message.nav.bar.name" name="" id="">
    <br>
    <!-- <input type="text" v-model="message2" name="" id=""> -->
  </template>
  
  
  <script setup lang="ts">
  import { ref, watch,reactive } from 'vue';
  // let message = ref<string>('')
  // let message2 = ref<string>('')
  
  // watch([message,message2],(newVal,oldVal)=>{
  //   console.log('new',newVal)
  //   console.log('old',oldVal) //可以监听多个数据
  // })
  
  let message = ref({ //如果是reactive，深层也是可以监听到的
    nav: {
      bar: {
        name: 'tangshao'
      }
    }
  })
  
  // 这个message也可以写成()=>message,或者()=>message.name
  watch(message, (newVal, oldVal) => {
    console.log('new', newVal.nav.bar.name)
    console.log('old', oldVal.nav.bar.name)
  },{
    deep:true, // 深层监听
    // immediate:true //第一次不监听、
  })
  
  
  
  </script>